<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/login.css" media="all">
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="main-body">
    <div class="login-main">
        <div class="login-top">
            <span>新冠接种系统</span>
            <span class="bg1"></span>
            <span class="bg2"></span>
        </div>
        <form class="layui-form login-bottom">
            <div class="center">
                <div class="item">
                    <span class="icon icon-2"></span>
                    <input type="text" name="number" lay-verify="required"  placeholder="请输入登录账号" maxlength="24"/>
                </div>

                <div class="item">
                    <span class="icon icon-3"></span>
                    <input type="password" name="password" lay-verify="pass"  placeholder="请输入密码" maxlength="20">
                    <span class="bind-password icon icon-4"></span>
                </div>

            </div>
            <div class="tip">
                <a href="register.html" class="no-id">没有账号，注册账号</a>
            </div>

            <div class="layui-form-item" style="text-align:center; width:100%;height:100%;margin:0px;">
                <button class="login-btn" lay-submit="" lay-filter="login">用户登录</button>
                <button class="login-btn" lay-submit="" lay-filter="admin_login">管理员登录</button>
            </div>

        </form>
    </div>
</div>

<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form','jquery'], function () {
        var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer;

        // 登录过期的时候，跳出ifram框架
        if (top.location != self.location) top.location = self.location;

        $('.bind-password').on('click', function () {
            if ($(this).hasClass('icon-5')) {
                $(this).removeClass('icon-5');
                $("input[name='password']").attr('type', 'password');
            } else {
                $(this).addClass('icon-5');
                $("input[name='password']").attr('type', 'text');
            }
        });

        $('.icon-nocheck').on('click', function () {
            if ($(this).hasClass('icon-check')) {
                $(this).removeClass('icon-check');
            } else {
                $(this).addClass('icon-check');
            }
        });

        // 进行登录操作
        form.on('submit(login)', function (obj) {
            obj = obj.field;
            if (obj.number == '') {
                layer.msg('用户名不能为空');
                return false;
            }
            if (obj.password == '') {
                layer.msg('密码不能为空');
                return false;
            }
            $.ajax({
                type: "POST",
                contentType: 'application/json',
                url: "http://110.42.199.36:8081/user/loginUser",
                data: JSON.stringify(obj),
                dataType: 'json',
                success: function (data) {
                    console.log("成功");
                    console.log(data);
                    if (data.data != null) {
                        if(!window.localStorage){
                            alert("浏览器支持localstorage");
                            return false;
                        }else{
                            //主逻辑业务
                            var storage = window.localStorage;
                            storage.setItem("number",data.data.number);
                            storage.setItem("password",data.data.password);
                        }
                        layer.msg('登录成功',
                            {
                                icon: 1,
                                time: 1500
                            }, function () {
                                location.replace('../index1.html')
                            })
                    } if(data.data == null){
                        layer.alert("用户名或密码错误", {icon: 2}, function (index) {
                            layer.close(index);
                        });
                    }
                }

            })
            return false;
        });

        //管理员登录
        form.on('submit(admin_login)', function (obj) {
            obj = obj.field;
            if (obj.number == '') {
                layer.msg('用户名不能为空');
                return false;
            }
            if (obj.password == '') {
                layer.msg('密码不能为空');
                return false;
            }
            $.ajax({
                type: "POST",
                contentType: 'application/json',
                url: "http://110.42.199.36:8081/user/loginUser",
                data: JSON.stringify(obj),
                dataType: 'json',
                success: function (data) {
                    console.log("成功");
                    console.log(data);

                    if (data.data != null && data.data.jurisdiction === 0) {
                        if(!window.localStorage){
                            alert("浏览器支持localstorage");
                            return false;
                        }else{
                            //主逻辑业务
                            var storage = window.localStorage;
                            storage.setItem("number",data.data.number);
                            storage.setItem("password",data.data.password);
                        }
                        layer.msg('管理员登录成功',
                            {
                                icon: 1,
                                time: 1500
                            }, function () {
                                location.replace('../index.html')
                            })
                    } if(data.data == null){
                        layer.alert("管理员用户名或密码错误", {icon: 2}, function (index) {
                            layer.close(index);
                        });
                    }
                }

            })
            return false;
        });


    });
</script>
</body>
</html>
